<template>
  <view>
    <uni-nav-bar
      fixed="true"
      @click-left="back"
      left-text="返回"
      title="提现"
      left-icon="jiantou2"
      background-color="#007BC3"
      right-text="提现记录"
      @click-right="showdrawal"
    ></uni-nav-bar>
    <view :style="style"></view>

    <form @submit="formSubmit">
      <view class="info-sgf">收款人信息</view>
      <view class="grace-padding grace-bg-white grace-common-mt grace-common-border">
        <view class="grace-form">
          <view class="grace-items">
            <view class="grace-label">姓名</view>
            <input type="text" class="input" placeholder="请输入真实姓名" name="nickname">
          </view>
          <view class="grace-items">
            <view class="grace-label">联系电话</view>
            <input type="text" class="input" placeholder="请输入联系电话" name="tel">
          </view>
          <view class="grace-items">
            <view class="grace-label">预约时间</view>
            <view class="grace-form-r">
              <picker
                @change="bindPickerCountry"
                :value="countryIndex"
                :range="country"
                name="country"
              >
                <view>
                  <text>{{country[countryIndex]}}</text>
                  <text></text>
                </view>
              </picker>
            </view>
          </view>
          <view class="grace-items">
            <view class="grace-label">提现地址</view>
            <input type="text" class="input" placeholder="请输入提现地址" name="adress">
          </view>
        </view>
      </view>
      <view>
        <button formType="submit" class="btn" type="primary">下一步</button>
      </view>
    </form>
  </view>
</template>
<script>
// import mpvueCityPicker from "@/components/cityPicker/cityPicker.vue";
import mpvuePicker from "../../../graceUI/threeComponents/mpvuePicker";
import mpvueCityPicker from "../../../graceUI/threeComponents/mpvueCityPicker.vue";
import uniNavBar from "@/components/lmq-navbar/lmq-navbar";
import uniIcon from "@/components/uni-icon";
var lmqChecker = require("@/graceUI/graceChecker.js");
export default {
  components: {
    uniNavBar,
    uniIcon,
    mpvuePicker,
    mpvueCityPicker
  },
  data() {
    return {
      zjhm: "",
      name: "",
      // 证件类型
      countryIndex: 0,
      country: ["三天", "七天", "九天"]
    };
  },
  computed: {
    //获取状态栏高度
    style() {
      var systemInfo = uni.getSystemInfoSync();
      var systo = uni.getSystemInfo();
      var statusBarHeight = systemInfo.statusBarHeight;
      return `height:${statusBarHeight + 44}px`;
    }
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1
      });
    },
    showdrawal() {
      uni.switchTab({
        url: "/pages/TabBar/Home/index"
      });
    },
    bindZjlxChange(e) {
      this.zjlxIndex = e.detail.value;
      // console.log(this.zjlx[this.zjlxIndex]);
    },
    bindPickerChange: function(e) {
      console.log(e);
      this.genderIndex = e.detail.value;
      this.genderValue = this.gender[this.genderIndex];
    },
    bindPickerCountry: function(e) {
      console.log(JSON.stringify(e));
      this.countryIndex = e.detail.value;
    },
    bindDateChange: function(e) {
      this.dateValue = e.detail.value;
    },
    formSubmit: function(e) {
      //定义表单规则
      var rule = [
        // {
        //   name: "nickname",
        //   checkType: "string",
        //   checkRule: "1,3",
        //   errorMsg: "姓名应为1-3个字符"
        // },
        // {
        //   name: "gender",
        //   checkType: "same",
        //   checkRule: "",
        //   errorMsg: "请选择性别"
        // },
        // {
        //   name: "country",
        //   checkType: "in",
        //   checkRule: "中国,韩国,美国,福州",
        //   errorMsg: "请选择国家"
        // },
        // {
        //   name: "zjlx",
        //   checkType: "in",
        //   checkRule: "身份证,护照",
        //   errorMsg: "请选择证件类型"
        // },
        // {
        //   name: "zjhm",
        //   checkType: "string",
        //   checkRule: "18,18",
        //   errorMsg: "请输入正确的银行卡号码"
        // }
        // {
        //   name: "bdyxq",
        //   checkType: "notsame",
        //   checkRule: "请输入证件有日期",
        //   errorMsg: "请选择证件有效期"
        // },
        // {
        //   name: "zylx",
        //   checkType: "notnull",
        //   checkRule: "",
        //   errorMsg: "职业类型不能为空"
        // },
        // {
        //   name: "address",
        //   checkType: "notnull",
        //   checkRule: "",
        //   errorMsg: "地址不能为空"
        // }
      ];
      var formData = e.detail.value;
      var checkRes = lmqChecker.check(formData, rule);
      if (checkRes) {
        uni.showToast({ title: "验证通过!", icon: "none" });
        console.log(JSON.stringify(e.detail.value));

        //验证成功后跳转
        uni.navigateTo({
          url:
            "../Office-price/Office-money?detail=" +
            JSON.stringify(e.detail.value)
        });
      } else {
        uni.showToast({ title: lmqChecker.error, icon: "none" });
      }
    }
  },
  back() {
    uni.navigateBack({
      delta: 1
    });
  }
};
</script>
<style scope>
.info-sgf {
  padding-left: 9%;
  height: 92upx;
  line-height: 92upx;
  font-size: 33upx;
}
text {
  color: #c1c0bf;
}
.grace-form-r {
  width: 100%;
  padding: 0 22px;
  line-height: 40px;
  display: block;
  overflow: hidden;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  margin-left: 9px;
  text-align: right;
}
.grace-padding {
  /* padding: 0% 5%; */

  width: 100%;
  box-sizing: border-box;
  padding: 0;
  padding-left: 10%;
}

.grace-form .grace-items picker view {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
/* 第一个不要 */
.grace-form .grace-items picker text:after {
  content: "";
  padding-left: 10upx;
  color: #007bc3;
  font-family: "lmqicon" !important;
  font-size: 22upx;
}
/* 第二个不要 */
.grace-form .grace-items picker text:nth-child(2):after {
  content: "\e626";
  padding-left: 10upx;
  color: #949393;
  font-family: "lmqicon" !important;
  font-size: 30upx;
}
.grace-form .grace-items {
  padding: 3px 0;
}
.grace-common-mt {
  margin-top: 0upx;
}
.grace-common-mtfours {
  margin: 0 0 40upx 0;
}
.grace-form .grace-items .input {
  width: 98%;
  height: 20px;
  line-height: 20px;
  background: none;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  border: 0;
  text-align: left;
  padding: 10px 2%;
  margin-left: 20px;
}
.btn {
  width: 80%;
  margin: 20upx auto 0;
}
.picker {
  background: #00b26a;
  width: 100%;
  line-height: 40px;
}
/* 地区样式 */
.grace-form-r {
  width: 100%;
  padding: 0 22px;
  line-height: 40px;
  display: block;
  overflow: hidden;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  margin-left: 9px;
  text-align: right;
  display: flex;
  justify-content: space-between;
}

.cityicon :after {
  content: "\e626";
  padding-left: 10upx;
  color: #949393;
  font-family: "lmqicon" !important;
  font-size: 30upx;
}
</style>
